<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>af</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        img {
            vertical-align: top;
        }
        
        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }
        
        #Q-nav1 {
            overflow: hidden;
        }
        
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <!--引入工具js-->
    <script src="tools.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            //需求1：当我们滚动界面的时候，被卷曲的头部如果超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部如果小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed

            //1.老三步。
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");

            window.onscroll = function() {
                //2.判断 ，被卷曲的头部的大小
                if (scroll().top > height) {
                    //3.满足条件添加类，否则删除类
                    middle.className += " fixed";
                    //第二个盒子也要占位置，为了避免重叠，我们给第三个盒子一个上padding的空间，把这个空间留给第二个盒子
                    main.style.paddingTop = middle.offsetHeight + "px";
                } else {
                    middle.className = "";
                    //清零
                    main.style.paddingTop = 0;
                }
            }

        }
    </script>
</head>

<body>
    <div class="top" id="top">
        <img src="images/1.jpg" alt="" />
    </div>
    <div id="Q-nav1">
        <img src="images/1.jpg" alt="" />
    </div>
    <div class="main" id="main">
        <img src="images/1.jpg" alt="" />
    </div>
</body>

</html>